<template>
  <div class="bg-white flex flex-col mt-4">
    <div class="w-[350px] m-auto flex flex-col md:w-[1440px] md:m-auto">
      <img :src="event.coverImage" />
      <div class="m-auto w-[1040px]">
        <div class="text-[34px] text-primary font-bold leading-[40px] mt-[40px]">
          {{ event.title }}
        </div>
        
        <!-- 演讲会场轮播组件 -->
        <div class="relative w-full my-8 overflow-visible"> <!-- 修改overflow-hidden为overflow-visible，使按钮可以显示在外部 -->
          <!-- 左右导航按钮容器 - 绝对定位在图片外侧 -->
          <div class="absolute top-0 left-0 right-0 bottom-0 flex items-center justify-between"> <!-- 增加宽度并向左偏移 -->
            <!-- 左导航按钮 -->
            <button
              @click="changePictureIndex(-1)" 
              :disabled="!event.pictures || currentImageIndex <= 0"
              :class="[
                'flex items-center justify-center hover:bg-gray-50 transition-all duration-300',
                { 'opacity-50': !event.pictures || currentImageIndex <= 0 }
                ]">
              <img class="w-[50px] h-[50px]" src="@/assets/images/previous.png" />
            </button>
            
            <!-- 右导航按钮 -->
            <button 
              @click="changePictureIndex(1)"
              :disabled="!event.pictures || currentImageIndex >= event.pictures.length - 1"
              :class="[
                'flex items-center justify-center hover:bg-gray-50 transition-all duration-300',
                { 'opacity-50': !event.pictures || currentImageIndex >= event.pictures.length - 1 }
                ]">
              <img class="w-[50px] h-[50px]" src="@/assets/images/next.png" />
            </button>
          </div>
          
          <!-- 主图片展示区域 -->
          <div class="w-[766px] h-[400px] overflow-hidden mx-auto"> <!-- 将圆角移到这里 -->
            <img 
              :src="event.pictures && event.pictures[currentImageIndex]" 
              class="w-full h-full object-cover"
            />
          </div>
        </div>
        
        <div v-if="event.context" class="py-[17px]">{{ event.context }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { eventDetailApi } from '@/api/event'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const event = ref({} as any)

const eid = route.query.eid as string

const currentImageIndex = ref(0)

const getEventDetail = async () => {
  const res: any = await eventDetailApi(eid, 'view')
  if (res.code === 0 && res.data) {
    event.value = res.data
  }
}

const changePictureIndex = (step: number) => {
  if (!event.value.pictures) return;
  
  const newIndex = currentImageIndex.value + step;
  if (newIndex >= 0 && newIndex < event.value.pictures.length) {
    currentImageIndex.value = newIndex;
  }
}

onMounted(() => {
  getEventDetail()
})
</script>

<style scoped>
</style>
